<script lang='ts' setup>
import { reactive } from 'vue'
import { resources_remove } from '@/apis/toolbox/resources/resources_remove.ts'

const emits = defineEmits(['update:show', 'success'])

const props = defineProps({
  show: { required: true, type: Boolean },
  path: { required: true, type: String }
})

const state = reactive<{ removing: boolean }>({ removing: false })

async function close(): Promise<void> {
  emits('update:show', false)
}

async function remove(): Promise<void> {
  state.removing = true
  const response = await resources_remove(props.path!)
  state.removing = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  window.$message.success("删除成功")
  await close()
  emits('success')
}
</script>

<template>
  <n-modal :show='props.show' class='resources-save-file-modal' transform-origin='center' @update:show='close'>
    <n-card>
      <n-space vertical>
        <n-divider>删除确认</n-divider>
        <div>[<n-text type='error'>{{ props.path! }}</n-text>]你确认删除此路径吗，删除后无法恢复，请谨慎操作</div>
        <div>
          <n-space align='center' justify='center'>
            <n-button size='small' type='primary' @click='close'>取消</n-button>
            <n-button :loading='state.removing' size='small' type='error' @click='remove'>确认删除</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>
.resources-save-file-modal {
  width: 800px;
}
</style>
